<template>
  <a-card :body-style="{padding: '0px 0px'}" :bordered="false">
    <a-space class="operator">
      <a-button @click="back" type="primary">返回上一页</a-button>
    </a-space>
    <a-form-model :model="form" :layout="layout" style="margin-top:24px" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item
        label="部门名称"
        prop="name"
      >
        <a-input v-model="form.name" placeholder="请填写用户名" autocomplete="off"/>
      </a-form-model-item>
      <a-form-model-item
        label="顶级部门"
        prop="status"
      >
        <a-select placeholder="请选择父级部门" v-model="form.parent_id">
          <a-select-option :value="0">无</a-select-option>
          <a-select-option :value="item.id" v-for="(item,index) in bumenList" :key="index">{{item.name}}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        label="排序"
      >
        <a-input v-model="form.orders" placeholder="请填写排序" autocomplete="off"/>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="btn_wrapperCol">
        <a-button type="primary" @click="onSubmit" :loading='loading'>
          提交
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
import {addGroup,editGroup} from '@/api/modules/bumen'
export default {
  name: 'bumenDetail',
  i18n: require('./i18n'),
  props:{
    mod:{
      type:String,
    },
    id:{
      type:[String,Number]
    },
    bumenList:{
      type:[Array],
      default:()=>[]
    },
    
  },
  data () {
    return {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
      btn_wrapperCol:{ span: 13, offset: 7 },
      layout:'horizontal', //'horizontal'|'vertical'
      loading:false,
      form:{
        name:'',
        parent_id:0,
        orders:0
      },
      screenWidth: document.body.clientWidth, // 屏幕宽度
      rules:{
        name:[
          {required: true,message: '请填写用户名', trigger: 'blur'}
        ],
      },
    }
  },
  created() {
    if(this.id != 0){
      this.getDetail()
    }
  },
  mounted() {
    this.changeLayout(document.body.clientWidth)
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
  },
  methods: {
    getDetail(){
      editGroup({id:this.id}).then((res) => {
        this.form = res.data
      }).catch(() => {
        
      });
    },
    onSubmit(){
      if(this.id != 0){
        this.form.id = this.id
      }
      this.loading = true;
      if(this.id == 0){
        addGroup(this.form).then(() => {
          this.loading = false;
          this.$message.success('新增成功')
          this.back()
        }).catch(()=>{
          this.loading = false;
        });
      }else{
        editGroup(this.form).then(() => {
          this.loading = false;
          this.$message.success('修改成功')
          this.back()
        }).catch(() => {
          this.loading = false;
        });
      }
    },
    back(){
      this.$emit('update:mod','normal')
    },
    changeLayout(e){
      if(e<=750){
        this.layout = 'vertical'
        this.labelCol = {}
        this.wrapperCol = {}
        this.btn_wrapperCol = {}
      }else{
        this.layout = 'horizontal'
        this.labelCol = {span: 7}
        this.wrapperCol = {span: 13}
        this.btn_wrapperCol = { span: 13, offset: 7 }
      }
    },
  },
  watch:{
    screenWidth(e){
      this.changeLayout(e)
    },
  },
  computed: {
    desc() {
      return this.$t('pageDesc')
    },
    formItemLayout() {
      const layout  = this.layout;
      return layout === 'horizontal'
        ? {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
          }
        : {};
    },
  }
}
</script>

<style scoped>

</style>
